    export default {
        name: "PurchaseList",
        setup(props) {
            const router = VueRouter.useRouter();
            const route = VueRouter.useRoute();
            const searchText = ref('');
            const currentPage = ref(1);
            const pageSize = ref(10);
            const total = ref(0);
            const purchaseData = ref([]);
            const loadData = async () => {
                const res = await getpurchases({
                    search: searchText.value.trim(),
                    page: Math.max(currentPage.value, 1),
                    pageSize: Math.min(Math.max(pageSize.value, 1), 100),
                })
                purchaseData.value = res.items
                total.value = res.total
            }
            
            const viewproduct = () => {
                router.push({ name: 'AdminProduct' })
            }
            
			// 分页处理
			const handlePageChange = () => {
				loadData();
			}

			// 搜索处理
			const handleSearch = () => {
				currentPage.value = 1;
				loadData();
			}

			// 清除搜索
			const clearSearch = () => {
				searchText.value = '';
				currentPage.value = 1;
				loadData();
			}
            
            onMounted(loadData)
            
            return {
                searchText, currentPage, pageSize, total, purchaseData, viewproduct,
                loadData, handlePageChange, clearSearch, handleSearch,
            }
        },
        
        template: `
	<div class="container">
        <div style="display: flex; align-items: center;">
            <el-button type="primary" @click="viewproduct()">返回商品列表</el-button>
            <el-input style="width:500px;margin-left: 10px;" v-model="searchText" placeholder="输入关键词搜索" clearable @keyup.enter="handleSearch" @clear="clearSearch">
                <template #prefix>
                	<el-icon class="el-input__icon"><search /></el-icon>
                </template>
				<template #append>
                    <el-button @click="handleSearch">搜索</el-button>
                </template>
			</el-input>
        </div>

		<!-- 数据表格 -->
		<el-table class="mt-1" :data="purchaseData" style="width: 100%" border stripe empty-text="暂无数据">>
            <el-table-column prop="product_name" label="商品名称" />
            <el-table-column prop="quantity" label="数量" align="center" width="120"/>
            <el-table-column prop="user_name" label="购买用户" align="center" width="150"/>
            <el-table-column prop="total_points" label="消耗积分" align="center" width="150"/>
            <el-table-column prop="created_at" label="购买时间" width="180">
                <template #default="{row}">{{ $validators.formatDate(row.created_at) }}</template>
            </el-table-column>
		</el-table>

		<!-- 分页 -->
		<div class="pagination" v-if="total">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
				:page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next"
				:total="total" @size-change="handlePageChange" @current-change="handlePageChange" />
		</div>
	</div>
        `
    }